(function () {
    // console.log(88)
    let back = document.querySelector('.back')

    back.addEventListener('click', function () {
        // console.log(1)
        history.back()
    })

    //渲染初始页面

    $.ajax({
        url: `http://chst.vip:1234/api/getgsproduct?shopid=0&areaid=0`,
        success(res) {
            // console.log(res.result)
            let str = ''
            res.result.forEach(item => {
                // console.log(item)
                str += `
                <li>
                <a href="">
                    <img src=${item.productImg} alt="">
                    <p>
                    ${item.productName}
                    </p>
                    <div class="red">${item.productPrice}</div>
                </a>
            </li>

                
                `
            })

            $('.info').html(str)
        }
    })









    //定义开关 控制三角箭头朝向
    let flag1 = true
    let flag2 = true
    //点击jd去请求对应的 数据渲染到 info1
    $('.jd').click(function () {
        // console.log(2)
        //判断开关看箭头朝向
        if (flag1) {
            $('.jd span').html('▲')
            $.ajax({
                url: `http://chst.vip:1234/api/getgsshop`,
                success(res) {
                    // console.log(res.result)
                    let str = ''
                    res.result.forEach(item => {
                        // console.log(item)
                        str += `
                            <li shopid=${item.shopId}>${item.shopName}</li>
                        
                        `

                    })
                    $('.info1').css({
                        display: "block"
                    })

                    $('.info2').css({
                        display: "none"
                    })

                    $('.hb span').html('▼')


                    $('.info1').html(str)

                    $('.info1').click(function (e) {
                        // console.log(e.target.getAttribute('shopId'))
                        let str = e.target.innerHTML + '<span>▼</span>'
                        // console.log(str)
                        $('.jd').html(str)
                        $('.jd').attr("shopId", e.target.getAttribute('shopId'))
                        $('.info1').css({
                            display: "none"
                        })

                        let id1 = $('.jd').attr("shopId")
                        let id2 = $('.hb').attr("areaId")
                        // console.log(id1)
                        // console.log(id2)

                        $.ajax({
                            url: `http://chst.vip:1234/api/getgsproduct?shopid=${id1}&areaid=${id2}`,
                            success(res) {
                                // console.log(res.result)
                                let str = ''
                                res.result.forEach(item => {
                                    // console.log(item)
                                    str += `
                                    <li>
                                    <a href="">
                                        <img src=${item.productImg} alt="">
                                        <p>
                                        ${item.productName}
                                        </p>
                                        <div class="red">${item.productPrice}</div>
                                    </a>
                                </li>
                    
                                    
                                    `
                                })

                                $('.info').html(str)
                            }
                        })

                    })
                }
            })

            flag1 = false

        } else {
            $('.jd span').html('▼')
            $('.info1').css({
                display: "none"
            })

            flag1 = true



        }
    })


    $('.hb').click(function () {
        // console.log(2)
        if (flag2) {
            $('.hb span').html('▲')
            $.ajax({
                url: `http://chst.vip:1234/api/getgsshoparea`,
                success(res) {
                    // console.log(res.result)
                    let str = ''
                    res.result.forEach(item => {
                        // console.log(item)
                        str += `
                            <li areaId=${item.areaId}>${item.areaName}</li>
                        
                        `

                    })
                    $('.info2').css({
                        display: "block"
                    })

                    $('.info1').css({
                        display: "none"
                    })

                    $('.jd span').html('▼')


                    $('.info2').html(str)

                    $('.info2').click(function (e) {
                        // console.log(e.target.getAttribute('areaId'))
                        let str = e.target.innerHTML.substring(0, 2) + '<span>▼</span>'
                        // console.log(str)
                        $('.hb').html(str)
                        $('.hb').attr("areaId", e.target.getAttribute('areaId'))
                        $('.info2').css({
                            display: "none"
                        })


                        let id1 = $('.jd').attr("shopId")
                        let id2 = $('.hb').attr("areaId")
                        // console.log(id1)
                        // console.log(id2)

                        $.ajax({
                            url: `http://chst.vip:1234/api/getgsproduct?shopid=${id1}&areaid=${id2}`,
                            success(res) {
                                // console.log(res.result)
                                let str = ''
                                res.result.forEach(item => {
                                    // console.log(item)
                                    str += `
                                    <li>
                                    <a href="">
                                        <img src=${item.productImg} alt="">
                                        <p>
                                        ${item.productName}
                                        </p>
                                        <div class="red">${item.productPrice}</div>
                                    </a>
                                </li>
                    
                                    
                                    `
                                })

                                $('.info').html(str)
                            }
                        })


                    })





                }
            })

            flag2 = false

        } else {
            $('.hb span').html('▼')
            $('.info2').css({
                display: "none"
            })

            flag2 = true
        }
    })

})()